<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>20-表格组件</title>
    <script src="../js/vue.js"></script>
    <script src="../element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <!--操作行-->
    <el-row type="flex" justify="left">
        <el-col :span="4">
            <el-button type="primary" icon="el-icon-plus">添加</el-button>
            <el-button type="danger" icon="el-icon-delete">删除</el-button>
        </el-col>
        <el-col :span="4">
            <el-input name="searchKeyWords" type="text" placeholder="请输入搜索关键字" v-model="searchKeyWords">
                <!--下拉列表插槽-->
                <el-select v-model="searchType" slot="prepend">
                    <el-option name="searchType" label="主键" value="0"></el-option>
                    <el-option name="searchType" label="姓名" value="1"></el-option>
                    <el-option name="searchType" label="地址" value="2"></el-option>
                </el-select>
                <!--按钮插槽-->
                <el-button type="info" icon="el-icon-search" slot="append">搜索</el-button>
            </el-input>
        </el-col>
    </el-row>
    <p></p>
    <!--    表格-->
    <el-table border :data="tableDataList" @select-all="selectAll" @select="selectOne">
        <!--    前两列-->
        <el-table-column type="selection" align="center"></el-table-column>
        <el-table-column label="序号" type="index" align="center"></el-table-column>
        <!--数据列-->
        <el-table-column label="主键" prop="id" align="center"></el-table-column>
        <el-table-column label="姓名" prop="name" align="center"></el-table-column>
        <el-table-column label="性别" prop="sex" align="center" :formatter="sexFormat"></el-table-column>
        <el-table-column label="生日" prop="birthday" align="center"></el-table-column>
        <el-table-column label="手机" prop="telephone" align="center"></el-table-column>
        <el-table-column label="职业" prop="job" align="center" :formatter="jobFormat"></el-table-column>
        <el-table-column label="薪资" prop="salary" align="center"></el-table-column>
        <el-table-column label="地址" prop="address" align="center"></el-table-column>
        <el-table-column label="备注" prop="remark" align="center"></el-table-column>
        <!--操作列-->
        <el-table-column label="操作" align="center">
            <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
            <el-button type="warning" icon="el-icon-edit" size="mini">编辑</el-button>
        </el-table-column>
    </el-table>
</div>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            tableDataList: [
                {
                    id: "10010",
                    name: "zyh",
                    sex: "1",
                    birthday: "2002-10-21",
                    telephone: "17362311286",
                    job: "1",
                    salary: 5000.00,
                    address: "湖北武汉",
                    remark: "zyhstc",
                },
                {
                    id: "10011",
                    name: "zyh",
                    sex: "0",
                    birthday: "2002-10-21",
                    telephone: "17362311286",
                    job: "2",
                    salary: 5000.00,
                    address: "湖北武汉",
                    remark: "zyhstc",
                },
                {
                    id: "10012",
                    name: "zyh",
                    sex: "1",
                    birthday: "2002-10-21",
                    telephone: "17362311286",
                    job: "3",
                    salary: 5000.00,
                    address: "湖北武汉",
                    remark: "zyhstc",
                },
                {
                    id: "10013",
                    name: "zyh",
                    sex: "1",
                    birthday: "2002-10-21",
                    telephone: "17362311286",
                    job: "2",
                    salary: 5000.00,
                    address: "湖北武汉",
                    remark: "zyhstc",
                },
                {
                    id: "10014",
                    name: "zyh",
                    sex: "1",
                    birthday: "2002-10-21",
                    telephone: "17362311286",
                    job: "2",
                    salary: 5000.00,
                    address: "湖北武汉",
                    remark: "zyhstc",
                },
                {
                    id: "10015",
                    name: "zyh",
                    sex: "1",
                    birthday: "2002-10-21",
                    telephone: "17362311286",
                    job: "1",
                    salary: 5000.00,
                    address: "湖北武汉",
                    remark: "zyhstc",
                },
                {
                    id: "10010",
                    name: "zyh",
                    sex: "1",
                    birthday: "2002-10-21",
                    telephone: "17362311286",
                    job: "1",
                    salary: 5000.00,
                    address: "湖北武汉",
                    remark: "zyhstc",
                },
                {
                    id: "10010",
                    name: "zyh",
                    sex: "1",
                    birthday: "2002-10-21",
                    telephone: "17362311286",
                    job: "1",
                    salary: 5000.00,
                    address: "湖北武汉",
                    remark: "zyhstc",
                },
            ],
            searchKeyWords:undefined,
            searchType:undefined,
        },
        methods: {
            // 性别格式化
            sexFormat:function (rowsData) {
                return rowsData.sex=="1"?"男":"女";
            },
            // 职业格式化
            jobFormat:function (rowsData) {
                switch (rowsData.job){
                    case "1":
                        return "攻城狮";
                    case "2":
                        return "程序猿";
                    case "3":
                        return "码农";
                };
            },
            // 全选方法
            selectAll:function (rowsData) {
                this.$alert("全选成功","温馨提示"+rowsData);
            },
            // 选中一条
            selectOne:function (rowData) {
                this.$alert("选中一条成功"+rowData[rowData.length-1].id,"温馨提示");
            },
        },
    });
</script>
</body>
</html>